<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 700px;
            height: 400px;
            background-color: aqua;
        }
        .yi{
            width: 100%;
            height: 60px;
            background-color: aquamarine;
            
        }
        .yi li{
            float: left;
            margin-left: 30px;
            width: 20px;
            height: 30px;
            position: relative;
        }
        .yi .ers{
            width: 400px;
            height: 200px;
            background: #ccc;
            position: absolute;
            top: 200%;
            display: none;
            

        }
        .yi p{
            height: 60px;
            background-color: aquamarine;
        }
        .yi .ers>span{
            float: left;
            width: 20px;
            height: 100px;
            background: #f66;
            margin-left: 10px;
        }
        .er{
            width: 100%;
            height: 350px;
            background-color: bisque;
        }
        .on{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="yi"></div>
        <div class="er"></div>
    </div>
    <script>
        // document.body.previousElementSibling
         var arr = [
            {
                title: "视频",
                child: ["金博会展览", "精选", "订阅", "思想", "100%公司", "订阅",]
            }, {
                title: "生活",
                child: ["100%公司", "金博会展览", "精选", "订阅", "订阅", "思想"]
            }, {
                title: "问吧",
                child: ["金博会展览", "精选", "100%公司", "订阅", "订阅", "思想"]
            }, {
                title: "澎湃号",
                child: ["100%公司", "订阅", "金博会展览", "精选", "订阅", "思想"]
            }
        ];

        function Big(obj){
            Object.assign(this,obj);

            this.init();

        }
        Big.prototype={

            constructor:Big,

            init:function(){
                this.move();
                this.Hg()
            },
            move:function(){
                var that=this;
                this.yi.innerHTML=that.arr.map((v,i)=>{
                    console.log(v)
                    return `
                    <ul>
                        <li>
                            <p>${v.title}</p>
                            <ol class='ers'>
                                ${v.child.map((a,b)=>{
                                    return `<span>${a}</span>`
                                }).join('')}
                            </ol>
                        </li>
                    </ul>
                    `
                }).join('');
            },
            Hg:function(){
                var that=this;
                var ers=document.querySelectorAll('.yi .ers')
                var ps=document.querySelectorAll('.yi p');
                

                console.log(ers)
                this.yi.addEventListener('mouseover',(e)=>{
                    var t=e.target;
                   
                    if(t.nodeName=='P'){
                        [...ps].forEach((v,i)=>{
                            v.classList.remove('on')
                        })
                        var index=[...ps].indexOf(t);
                        [...ps][index].classList.add('on');
                    t.nextElementSibling.style.display='block'
                    
                    }
                })
                this.yi.addEventListener('mouseout',(e)=>{
                    var t=e.target;
                 if(t.nodeName=='P'){
                     t.nextElementSibling.style.display='none'
                 }
                  
                })
            }

        }
        new Big({
            yi:document.querySelector('.yi'),
            er:document.querySelector('.er'),
            ers:document.querySelector('.ers'),
            arr:arr
        });
    </script>
</body>
</html>